.navbar{
    border: none;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 11;
    width: 100%;
    padding:0;
    background: $white;
    min-height: 50px;
    box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.04);

    .navbar-toggle {
        text-decoration: none;
        color: $white;
        width: 20px;
        height: 20px;
        margin-top: -4px;
        margin-right: 17px;
        &:before {
            content: '\E8D5';
            font-family: 'Material Icons';
            font-size: 26px;
        }
    }

    .navbar-collapse {
        &.in {
            overflow: visible;
        }
    }

    .search_bar{
        width: 500px;
        vertical-align: top;
    }
}
.navbar-header{
    @extend .inlineblock; 

    .navbar-brand{
        @extend .padding-0;
        color: $grey-900 !important;
        font-size:18px;

        span{
            vertical-align: middle;
        }
    }

    .bars {
        float: left;
        text-decoration: none;
    }
}

.navbar-nav{    
    @extend .inlineblock;
    width: 100%;

    vertical-align: top;

            
    > li {
        @extend .inlineblock;
    }

    li.app_menu{
        .dropdown-menu{
            left: 0;
        }
    }

    li.notifications{
        .dropdown-avatar{
            width: 40px;
        }
    }

    .dropdown-menu{
        left: 0;
        right: auto;
        position: absolute;
        @extend .padding-0;  

        ul.menu{
            li{
                list-style: none;
                border-bottom:none;
            }
            .media{
                @extend .m-b-0;
                img{
                    @include border-radius(3px);
                }
                .media-body{
                    @extend .m-l-15;
                    width: 250px;
                    .name{
                        @extend .displayblock;                            
                        font-weight: 600;
                        .time{
                            float: right;
                            font-size: 12px;
                            font-weight: normal;
                        }
                    }
                    .message{
                        @extend .displayblock;
                        font-size: 13px;
                        line-height: 15px;
                    }
                }
            }
        }
    }

    .input-group{              
        padding: 11px 15px 0 15px;
    }   

    >li {
        >a {
            padding: 0px 15px;
            line-height: 59px;
            @extend .inlineblock;
            color: $grey-900;
            i{
                font-size: 20px;
            }
        }
    }
}

.ls-toggle-menu{
    .sidebar {
        margin-left: -300px;
    }

    section.content {
        @extend .m-l-0;
    }
}
.ls-closed{
    .sidebar {
        left: -300px;
    }
    
    .bars {

        &:after,
        &:before {
            font-family: 'Material Icons';
            font-size: 24px;
            position: absolute;
            top:0px;
            left: 12px;           
            @include transform(scale(0));
            @include transition(all .3s);
        }
        &:before {
            content: '\E5D2';
            @include transform(scale(1));
        }
        &:after {
            content: '\E5C4';
            @include transform(scale(0));
        }
    }
    section.content{
        margin: 60px 0 0 0;
    }
}
.overlay-open{

    .bars {        
        &:before {
            @include transform(scale(0));
        }
        &:after {
            @include transform(scale(1));
        }
    }
}


@media (max-width: 1169px) {
    .navbar .search_bar{
        width: 350px;
    }
}
@media (max-width:992px) {
    .navbar{
        .navbar-nav{
            .task, .fullscreen, .btn_overlay{
                display: none;
            }
        }
    }
    
}
@media (max-width: 767px) {
    .navbar-nav{
        .search_bar{
            display: none !important;
        }
        .navbar-header{
            margin-left: 25px;
        }
    }
}
@media (max-width:500px){
   
}
